<template>
  <!-- 百度地图 -->
  <div
    :style="{width:width,height:height}"
  ></div>
</template>

<script>
  export default {
    name: 'BaiduMap',
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      chartData: {
        type: Object,
        default: () => {
        }
      }
    },
    data() {
      return {
        centerLng: 123.443212, // 地图中心经度
        centerLat: 41.811492, // 地图中心纬度
        // color: ['#99CCFF','#CCFF66', '#FF9999', '#FFFF99', '#9999FF'], // 颜色
        line_data_j_h:[
          [123.272821,41.804018],
          [123.256723,41.803367],
          [123.246662,41.801216],
          [123.220504,41.788954],
          [123.20843,41.783791],
          [123.190608,41.777551],
          [123.17911,41.773032],
          [123.164737,41.765715],
          [123.160138,41.763132],
          [123.160138,41.763132],
          [123.160138,41.763132],
        ],
        line_data_r_c: [
          [123.480653,41.919948],
          [123.48554,41.918874],
          [123.522047,41.903844],
          [123.526071,41.901481],
          [123.534695,41.894179],
          [123.536995,41.892675],
          [123.539869,41.891601],
          [123.544181,41.890742],
          [123.546768,41.889883],
          [123.55108,41.889883],
          [123.555104,41.891172],
          [123.558554,41.891172],
          [123.56574,41.885157],
          [123.571777,41.877853],
          [123.574077,41.874845],
          [123.574652,41.870333],
          [123.574077,41.865821],
          [123.574077,41.861738],
          [123.584425,41.837235],
          [123.585288,41.83401],
          [123.583275,41.823475],
          [123.583563,41.82111],
          [123.602248,41.807346],
          [123.60541,41.80412],
          [123.605697,41.800678],
          [123.60426,41.794655],
          [123.596498,41.771418],
          [123.594774,41.76819],
          [123.592761,41.765392],
          [123.589312,41.761087],
          [123.584138,41.757213],
          [123.577239,41.754199],
          [123.566028,41.749248],
          [123.559704,41.747311],
          [123.522334,41.739775],
          [123.501062,41.729655],
          [123.485827,41.722764],
          [123.476916,41.720179],
          [123.468867,41.71781],
          [123.465993,41.716949],
          [123.453919,41.707256],
          [123.450182,41.705101],
          [123.446733,41.703809],
          [123.442996,41.703593],
          [123.435235,41.70424],
          [123.395278,41.714364],
          [123.379468,41.720395],
          [123.374868,41.721687],
          [123.370557,41.722118],
          [123.36567,41.722333],
          [123.321976,41.70941],
          [123.309903,41.733531],
          [123.29553,41.757213],
          [123.288919,41.77443],
          [123.281157,41.790353],
          [123.280295,41.791643],
          [123.27857,41.795085],
          [123.27857,41.799818],
          [123.284032,41.816164],
          [123.284032,41.8224],
          [123.284607,41.828636],
          [123.285182,41.832936],
          [123.298692,41.850133],
          [123.304441,41.852712],
          [123.306741,41.853571],
          [123.320539,41.856151],
          [123.330887,41.858085],
          [123.358196,41.878498],
          [123.36337,41.881291],
          [123.376018,41.884298],
          [123.386654,41.88752],
          [123.393266,41.890313],
          [123.419424,41.900193],
          [123.438397,41.907494],
          [123.44817,41.911789],
          [123.465705,41.916513],
          [123.475479,41.919304],
          [123.479503,41.920163],
          [123.479503,41.920163],
          [123.479503,41.920163]
        ],
        line_data_s_h: [
          [123.324456,41.703477],
          [123.325857,41.701013],
          [123.326791,41.698482],
          [123.327222,41.695735],
          [123.327438,41.693096],
          [123.327007,41.689594],
          [123.326001,41.679601],
          [123.324743,41.667208],
          [123.323198,41.65271],
          [123.321761,41.639099],
          [123.320683,41.628962],
          [123.319928,41.621197],
          [123.319892,41.620173],
          [123.319928,41.618177],
          [123.320036,41.61629],
          [123.320467,41.612461],
          [123.321222,41.606554],
          [123.322479,41.596683],
          [123.323521,41.587835],
          [123.323521,41.587835],
          [123.323521,41.587835],
        ],
        line_data_s_f: [
          [123.480581,41.715392],
          [123.490786,41.712323],
          [123.494271,41.711273],
          [123.496284,41.710519],
          [123.498799,41.709173],
          [123.50002,41.70823],
          [123.501673,41.706749],
          [123.504081,41.703679],
          [123.510836,41.694308],
          [123.513064,41.691318],
          [123.516513,41.687466],
          [123.524778,41.678927],
          [123.528874,41.674751],
          [123.530563,41.673081],
          [123.532288,41.671707],
          [123.5343,41.670414],
          [123.538791,41.667881],
          [123.539977,41.667234],
          [123.540947,41.666642],
          [123.54278,41.665348],
          [123.544648,41.663705],
          [123.54587,41.66225],
          [123.546696,41.661091],
          [123.547523,41.65977],
          [123.548098,41.658639],
          [123.548745,41.656914],
          [123.549787,41.652818],
          [123.550757,41.648694],
          [123.550757,41.648694],
          [123.550757,41.648694],
        ],
        line_option: {
          strokeWeight: 12,
          strokeOpacity: 0.4,
          enableClicking: true,
        },
        icon_data_mj: [
          [123.32133,41.709927],
          [123.332971,41.685818],
        ],
        icon_data_llq: [
          [123.60426,41.794655],
          [123.544648,41.663705],
        ],
        icon_data_qiang: [
          [123.503147,41.731545]
        ],
        icon_data_qiu: [
          [123.498727,41.709112]
        ],
        icon_data_qbb: [
          [123.368257,41.722836],
          [123.246662,41.801216],
        ],
        index: ''
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler: function () {
          this.initChart()
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    methods: {
      initChart() {
        let _this = this
        _this.echartsModel = this.$echarts.init(this.$el)
        _this.echartsModel.clear()
        let option = {
          bmap: {
            center: [_this.centerLng, _this.centerLat],
            zoom: 12,
            roam: true, // 用户是否可以拖放和缩放地图
          },
          animation: true,//关闭动画效果，这样在地图上覆盖散点图或者热力图的时候，拖动将不会有比较长时间的延迟
          series: []
        }
        _this.echartsModel.setOption(option)


        // 添加百度地图插件bmp，获得地图对象，获取到的百度地图对象适用于所有的百度地图的接口。
        _this.mapModel = _this.echartsModel.getModel().getComponent('bmap').getBMap()
        _this.mapModel.centerAndZoom(new BMap.Point(_this.centerLng,_this.centerLat),_this.zoom)
        _this.mapModel.setMapStyleV2({
          styleId: '2bd37d3ac9abbdbd6a9c3e1e6b3435fd'
        })

        _this.mapModel.addEventListener('click', function(e){
          _this.clickPolyline()
        });

        // 京哈
        let points_j_h = []
        this.line_data_j_h.map(item => {points_j_h.push(new BMap.Point(item[0], item[1]))})
        let polyline_j_h = new BMap.Polyline(points_j_h, {...this.line_option, strokeColor: '#99CCFF'})
        polyline_j_h.addEventListener('mouseover', function(){
          _this.index = 'jh'
        });
        polyline_j_h.addEventListener('mouseout', function(){
          _this.index = ''
        });
        _this.mapModel.addOverlay(polyline_j_h)

        // 绕城
        let points_r_c = []
        this.line_data_r_c.map(item => {points_r_c.push(new BMap.Point(item[0], item[1]))})
        let polyline_r_c = new BMap.Polyline(points_r_c, {...this.line_option, strokeColor: '#CCFF66'})
        polyline_r_c.addEventListener('mouseover', function(){
          _this.index = 'rc'
        })
        polyline_r_c.addEventListener('mouseout', function(){
          _this.index = ''
        })
        _this.mapModel.addOverlay(polyline_r_c)

        // 沈海
        let points_s_h = []
        this.line_data_s_h.map(item => {points_s_h.push(new BMap.Point(item[0], item[1]))})
        let polyline_s_h = new BMap.Polyline(points_s_h, {...this.line_option, strokeColor: '#FF9999'})
        polyline_s_h.addEventListener('mouseover', function(){
          _this.index = 'sh'
        })
        polyline_s_h.addEventListener('mouseout', function(){
          _this.index = ''
        })
        _this.mapModel.addOverlay(polyline_s_h)

        // 沈阜
        let points_s_f = []
        this.line_data_s_f.map(item => {points_s_f.push(new BMap.Point(item[0], item[1]))})
        let polyline_s_f = new BMap.Polyline(points_s_f, {...this.line_option, strokeColor: '#FF9900'})
        polyline_s_f.addEventListener('mouseover', function(){
          _this.index = 'sf'
        })
        polyline_s_f.addEventListener('mouseout', function(){
          _this.index = ''
        })
        _this.mapModel.addOverlay(polyline_s_f)

        // 枪
        for (let i = 0; i < this.icon_data_qiang.length; i++) {
          let marker = new BMap.Marker(new BMap.Point(...this.icon_data_qiang[i]), {
            icon: new BMap.Icon(require('../../../assets/images/mapIcon/qiangssxj_48.png'), new BMap.Size(48,48), {
              anchor: new BMap.Size(24, 48),
            })
          })
          _this.mapModel.addOverlay(marker)
        }

        // 门架
        for (let i = 0; i < this.icon_data_mj.length; i++) {
          let marker = new BMap.Marker(new BMap.Point(...this.icon_data_mj[i]), {
            icon: new BMap.Icon(require('../../../assets/images/mapIcon/mj_48.png'), new BMap.Size(48,48), {
              anchor: new BMap.Size(24, 48),
            }),
            enableClicking: false
          })
          _this.mapModel.addOverlay(marker)
        }

        // 门架情报板
        for (let i = 0; i < this.icon_data_qbb.length; i++) {
          let marker = new BMap.Marker(new BMap.Point(...this.icon_data_qbb[i]), {
            icon: new BMap.Icon(require('../../../assets/images/mapIcon/mjqbb_48.png'), new BMap.Size(48,48), {
              anchor: new BMap.Size(24, 48),
            }),
            enableClicking: false
          })
          _this.mapModel.addOverlay(marker)
        }

        // 路由器
        for (let i = 0; i < this.icon_data_llq.length; i++) {
          let marker = new BMap.Marker(new BMap.Point(...this.icon_data_llq[i]), {
            icon: new BMap.Icon(require('../../../assets/images/mapIcon/lyq_48.png'), new BMap.Size(48,48), {
              anchor: new BMap.Size(24, 48),
            }),
            enableClicking: false
          })
          _this.mapModel.addOverlay(marker)
        }


        // 球形
        for (let i = 0; i < this.icon_data_qiu.length; i++) {
          let marker = new BMap.Marker(new BMap.Point(...this.icon_data_qiu[i]), {
            icon: new BMap.Icon(require('../../../assets/images/mapIcon/qiussxj_48.png'), new BMap.Size(48,48), {
              anchor: new BMap.Size(24, 48),
            }),
            enableClicking: false
          })
          _this.mapModel.addOverlay(marker)
        }

        // _this.mapModel.setMinZoom(12.5) // 最小缩放级别
        // _this.mapModel.setMaxZoom(12.5) // 最大缩放级别
      },
      clickPolyline() {
        if (this.index !== '') {
          this.$emit('clickPolyline')
        }
      }
    }
  }
</script>

<style scoped>
</style>
